<!-- 首页 -->
<script setup>
// import Map from "../../components/map.vue";
import OlArc from "../../components/olArc.vue";
import BridgeCountChart from "../../components/bridgeCountChart.vue";
import TonnageCountChart from "../../components/tonnageCountChart.vue";
import Water from "../../components/water.vue";
import Bridge from "../../components/bridge.vue";
// import Ship from "../../components/ship.vue";

import { ref, onMounted, reactive, watch, provide, nextTick } from "vue";
// 引入api
import {
  getNavigationFators,
  getAnnualShipNavigateTonsTotal,
  getwaterwayBridgeDistribution,
} from "../../utils/apis";
const showMap = ref(null); //这个时候获取了子组件Comp
const showBarEchartBox = ref(false);
const showTonnageEchartBox = ref(false);
const showChooseBox = ref(false);
// 水道信息
const showWater = ref(false);
// 桥梁信息
const showBridge = ref(false);
// 船舶信息
const showShip = ref(false);
// 通航要素
const navigation = ref("");
// 地图传递过来的桥梁id
const bridgeId = ref("");
const showBridgeCount = () => {
  showBarEchartBox.value = true;
  showTonnageEchartBox.value = false;
  showChooseBox.value = false;
};
const showTonnageCount = () => {
  showTonnageEchartBox.value = true;
  showChooseBox.value = false;
  showBarEchartBox.value = false;
};
const showChoose = () => {
  // showChooseBox.value = true;
  showTonnageEchartBox.value = false;
  showBarEchartBox.value = false;
  showMap.value.showChooseBoxFn()
};
// 水道信息
const showWaterBox = () => {
  showWater.value = true;
};
watch(
  bridgeId,
  (newVal, oldVal) => {
    console.log("监听", newVal, oldVal);
  },
  {
    deep: true,
    immediate: true,
  }
);
// 桥梁信息
const showBridgeBox = (val) => {
  if (val.bridgeId != "" || val.bridgeId != undefined || val.bridgeId != null) {
    isUpdate.value = true;
    bridgeId.value = val.bridgeId;
    setTimeout(() => {
      showBridge.value = true;
    }, 100);
  }
};
const closeBarBtn = () => {
  showBarEchartBox.value = false;
};
const closeTonBtn = () => {
  showTonnageEchartBox.value = false;
};
const closeChooseBtn = (value) => {
  showChooseBox.value = false;
};
const closeWaterBtn = () => {
  showWater.value = false;
};
const closeBridgeBtn = () => {
  // 关闭弹窗清空id
  isUpdate.value = false;
  bridgeId.value = "";
  showBridge.value = false;
};
const closeShipBtn = () => {
  showShip.value = false;
};

const getNavigationFatorsFn = () => {
  getNavigationFators().then((res) => {
    navigation.value = res.data[0];
  });
};
// 全年通航船舶吨位统计
const shipTonsData = ref();
const getShipTonsTotalFn = () => {
  getAnnualShipNavigateTonsTotal().then((res) => {
    shipTonsData.value = res.data[0];
  });
};
const isUpdate = ref(true);
const height = ref();
const showMoreMes = ref(true);
const showTop = ref(false);
const showBottom = ref(true);
const showMore = () => {
  showMoreMes.value = !showMoreMes.value;
  if (showMoreMes.value) {
    height.value = "30px";
    showTop.value = true;
  } else {
    height.value = "";
    showTop.value = false;
  }
};
const close = (val) => {
  showChooseBox.value = val;
};

const updateCount = ref([]);

const showChangeMap = ref(false);
const changeMap = () => {
  showMap.value.showChangeMap();
};
watch(
  updateCount,
  (newval, oldval) => {
    console.log("首页的updateCount", updateCount);
    if (newval) {
    }
  },
  { deep: true, immediate: true }
);
watch(
  () => showChangeMap,
  (newValue) => {
    console.log(146, newValue);
  }
),
  watch(
    showChangeMap,
    (newval, oldval) => {
      console.log("首页的showChangeMap", showChangeMap.value);
    },
    { deep: true, immediate: true }
  );
onMounted(() => {
  getNavigationFatorsFn();

  showMore();
});
</script>
<template>
  <div class="main">
    <!-- 左侧边提示 -->
    <div class="leftSide">
      <!-- 筛选 -->
      <div
        class="leftSideItem"
        @click="showChoose"
        style="border-radius: 8px 8px 0 0"
      >
        <img src="../../static/images/Slice3.png" alt="" />
      </div>
      <!-- 桥梁统计 -->
      <div class="leftSideItem" @click="showBridgeCount">
        <img src="../../static/images/Slice4.png" alt="" />
      </div>
      <!-- 吨位统计 -->
      <div class="leftSideItem" @click="showTonnageCount">
        <img src="../../static/images/Slice5.png" alt="" />
      </div>
      <!-- 地图展示 -->
      <div
        class="leftSideItem"
        @click="changeMap"
        style="border-radius: 0 0 8px 8px"
      >
        <img src="../../static/images/changeOver.png" alt="" />
      </div>
    </div>
    <!-- 右侧边提示 -->
    <div class="rightSide" :style="{ height: height }">
      <div class="rightSideItem">
        <div class="name one">桥梁数</div>
        <div
          class="number downicon"
          style="margin: 8px auto; background: rgba(38, 111, 232, 0.06)"
          @click="showMore"
          v-show="showTop"
        >
          &#xe614;
        </div>
        <div class="number">{{ navigation.bridgenum }}</div>

        <div class="name two">全年通航数</div>
        <div class="number">{{ navigation.yearnavigationnum }}</div>
        <div class="name three">航道里程数</div>
        <div class="number">{{ navigation.waterwaymileage }}</div>
        <div class="name four">内河通航里程数</div>
        <div class="number">{{ navigation.rivernavigatemileage }}</div>
        <div
          class="number downicon"
          style="margin: 8px auto"
          @click="showMore"
          v-show="showBottom"
        >
          &#xe611;
        </div>
      </div>
    </div>
    <!-- 引入地图 -->
    <!-- <Map @showBridgeBox="showBridgeBox" :updateCount="updateCount" @initMap="initMap"></Map> -->
    <OlArc ref="showMap"></OlArc>
    <!-- 桥梁统计图 -->
    <van-popup
      v-model:show="showBarEchartBox"
      round
      position="bottom"
      :style="{ height: '417px', overflow: 'hidden' }"
      @click-close-icon="closeBarBtn"
      :overlay="true"
      :closeable="true"
      :overlay-style="{ background: 'rgba(255,255,255,0)' }"
      :z-index="1000"
    >
      <BridgeCountChart></BridgeCountChart>
    </van-popup>
    <!-- 吨位统计 -->
    <van-popup
      v-model:show="showTonnageEchartBox"
      round
      position="bottom"
      :style="{ height: '417px' }"
      @click-close-icon="closeTonBtn"
      :overlay="true"
      :closeable="true"
      :overlay-style="{ background: 'rgba(255,255,255,0)' }"
      :z-index="1000"
    >
      <TonnageCountChart :shipTonsData="shipTonsData"></TonnageCountChart>
    </van-popup>
    <!-- 水道信息 -->
    <van-popup
      v-model:show="showWater"
      round
      position="bottom"
      :style="{ height: '28%', overflow: 'hidden' }"
      @click-close-icon="closeWaterBtn"
      :overlay="true"
      :closeable="true"
      :overlay-style="{ background: 'rgba(255,255,255,0)' }"
    >
      <Water></Water>
    </van-popup>
    <!-- 桥梁信息 -->
    <van-popup
      v-model:show="showBridge"
      round
      position="bottom"
      :lazy-render="true"
      :style="{ height: '35%', overflow: 'hidden' }"
      @click-close-icon="closeBridgeBtn"
      :overlay="true"
      :closeable="true"
      :overlay-style="{ background: 'rgba(255,255,255,0)' }"
    >
      <Bridge :bridgeId="bridgeId" v-if="isUpdate"></Bridge>
    </van-popup>
    <!-- 船舶信息 -->
    <van-popup
      v-model:show="showShip"
      round
      position="bottom"
      :lazy-render="true"
      :style="{ height: '35%', overflow: 'hidden' }"
      @click-close-icon="closeShipBtn"
      :overlay="true"
      :closeable="true"
      :overlay-style="{ background: 'rgba(255,255,255,0)' }"
    >
      <Ship></Ship>
    </van-popup>
  </div>
</template>

<style lang="scss" scoped>
.main {
  position: relative;
  height: 100%;
  .backPicture {
    width: 100%;
  }
  .mesTip {
    background-color: #ccc;
    color: #fff;
    display: flex;
    justify-content: center;
    align-content: center;
  }
  .leftSide {
    position: absolute;
    z-index: 1000;
    top: 65px;
    left: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .leftSideItem {
      width: 20px;
      height: 20px;
      background-color: #fff;
      padding: 12px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .leftSideItem:first-of-type::after {
      content: "";
      position: absolute;
      width: 34px;
      height: 1px;
      background: rgba(38, 111, 232, 0.1);
      // background: #00c462;
      bottom: 0;
      left: 4px;
      z-index: 9999;
    }
    .leftSideItem:nth-of-type(3n)::after {
      content: "";
      position: absolute;
      width: 34px;
      height: 1px;
      background: rgba(38, 111, 232, 0.1);
      // background: #00c462;
      bottom: 0;
      left: 4px;
      z-index: 9999;
    }
    .leftSideItem:nth-of-type(2n)::after {
      content: "";
      position: absolute;
      width: 34px;
      height: 1px;
      background: rgba(38, 111, 232, 0.1);
      // background: #00c462;
      bottom: 0;
      left: 4px;
      z-index: 9999;
    }
    .leftSideItem:last-of-type::after {
      content: "";
      position: absolute;
      width: 34px;
      height: 1px;
      background: #fff;
      top: 0;
      left: 4px;
      z-index: 9999;
    }
  }
  .rightSide {
    position: absolute;
    z-index: 99;
    top: 65px;
    right: 16px;
    background-color: #fff;
    padding: 16px;
    border-radius: 8px;
    overflow: hidden;
    .rightSideItem {
      color: rgba(0, 0, 0, 0.9);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .name {
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.9);
        padding-bottom: 2px;
        position: relative;
      }
      .number {
        color: rgba(38, 111, 232, 1);
        margin-bottom: 6px;
        font-size: 16px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #266fe8;
      }
      .name::before {
        content: "";
        width: 2px;
        height: 12px;
        position: absolute;
        top: 4px;
        left: -8px;
      }
      .one::before {
        background-color: #604ae7;
      }
      .two::before {
        background-color: #00c462;
      }
      .three::before {
        background-color: #fabe19;
      }
      .four::before {
        background-color: #00d6e0;
      }
      .downicon {
        font-family: "iconfont";
        width: 12px;
        height: 6px;
        color: #266fe8;
        margin-left: 4px;
      }
    }
  }
  .barChartBox {
    background: #fff;
    position: absolute;
    bottom: 50px;
    width: 100%;
    height: 50%;
    z-index: 99;
    border-radius: 8px 8px 0 0;
    .closeBtnBox {
      position: relative;
      .closeBtn {
        position: absolute;
        right: 20px;
        width: 12px;
        height: 12px;
        top: 20px;
        text-align: center;
        line-height: 12px;
      }
    }
  }
}
::v-deep .van-popup--bottom {
  bottom: 50px;
}
</style>